import React,{Component}  from 'react';
import moment from 'moment';
import {MyCharts} from '../../components';
import echarts from 'echarts';

const VarLineChart = ({data}) =>{
	console.log('33333',data)
	const varChartsX=data.map((item,i)=>item.date.replace(/-/g,'/'))
	const VarChartsData=[
		{
			name:'组合',
			data:data.map((item,i)=>item.zuhe)
		},
		{
			name:'基准',
			data:data.map((item,i)=>item.jizhun)
		},
		{
			name:'3',
			type:'area',
			data:data.map((item,i)=>(item.zuhe*1000-item.jizhun*1000)/1000)
		}
	]
	console.log('ccc',VarChartsData)
	const LineChart={
		charts:{
			option:{
				color: [
					'#F4A460', '#f1a126', '#3084c1'
				],
				tooltip: {
					trigger: 'axis',
					formatter: '{a0}：{c0}%<br/>{a1}：{c1}%<br/>{a2}：{c2}%'
				},
				legend: {
					right: '5%',
					padding:[5,0],
					data: VarChartsData.map((item, i) => ({name: item.name, icon: 'circle'})),
					itemWidth: 6,
					itemHeight: 6
				},
				grid: {
					left: '5%',
					right: '15%',
					bottom: '5%',
					top: "10%",
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: varChartsX,
					axisTick: {
						alignWithLabel: true,
						show:false
					},
					axisLine:{
						show:false
					},
					axisLabel: {
						color:'#555'
						}
				},
				yAxis: {
					type: 'value',
					name: '单位:%',
					axisTick: {
						alignWithLabel: true,
						show:false
					},
					axisLine:{
						show:false
					},
					axisLabel: {
						color:'#797979'
						}
				},
				series: VarChartsData.map((item, i) => {
					console.log('0-0-',item)
					if (item.type == 'area') {
						return ({
							name: item.name,
							type: 'line',
							symbol: "none",
							data: item.data,
							lineStyle: {
								normal: {
									width: 0
								}
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: '#488EC7'
										}, {
											offset: 1,
											color: '#4FB0D1'
										}
									])
								}
							}
						})
					} else {
						return ({
		      name: item.name,
		      type: 'line',
		      symbol: "none",
		      data: item.data,
		      lineStyle: {
		        normal: {
		          width: 1
		        }
		      }
		    })
					}
				})
			}
		}
	}
	return (
			<div>
				<MyCharts {...LineChart}/>
			</div>
		)
}


VarLineChart.propTypes={

}

export default VarLineChart